import { FC, useEffect, useMemo } from 'react';
import styles from './style.less';

import ScrollModel from '@/components/ScrollModel';
import SimpleList from '@/components/SimpleList';
import Sunburst from '@/components/Sunburst';
import Bar from '@/components/Bar';
import LittleTitle from './../components/LittleTitle';

import bg1 from '@/assets/qyhx/policy/bar1_bg.png';
import bg2 from '@/assets/qyhx/policy/bar2_bg.png';

import * as echarts from 'echarts';

import { useModel } from 'umi';

const first_columns: any[] = [
  {
    title: '政策名称',
    dataIndex: 'name',
    width: 1120,
    align: 'center',
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 164,
    align: 'center',
  },
  {
    title: '日期',
    dataIndex: 'date',
    width: 164,
    align: 'center',
  },
  {
    title: '主管单位',
    dataIndex: 'company',
    width: 182,
    align: 'center',
  },
];

const sunburstData = [
  {
    name: '经开区',
    value: 400,
    children: [
      {
        name: '人才',
        value: 100,
        children: [
          {
            name: '经开区人才',
            value: 20,
          },
          {
            name: '经开区人才管理办法',
            value: 20,
          },
          {
            name: '经开区人才管理',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区人才管理',
            value: 20,
          },
        ],
      },
      {
        name: '税收',
        value: 100,
        children: [
          {
            name: '经开区税收',
            value: 20,
          },
          {
            name: '经开区税收管理办法',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区税收',
            value: 20,
          },
          {
            name: '经开区税收管理办法',
            value: 20,
          },
        ],
      },
      {
        name: '房屋',
        value: 100,
        children: [
          {
            name: '经开区房屋管理办法',
            value: 20,
          },
          {
            name: '经开区房屋',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区房屋管理办法',
            value: 20,
          },
          {
            name: '经开区房屋',
            value: 20,
          },
        ],
      },
      {
        name: '资金',
        value: 100,
        children: [
          {
            name: '经开区资金管理办法',
            value: 20,
          },
          {
            name: '经开区资金',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区资金管理办法',
            value: 20,
          },
          {
            name: '经开区资金',
            value: 20,
          },
        ],
      },
    ],
  },
];
const beforeColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'rgba(150,209,255,.3)',
  },
  {
    offset: 1,
    color: 'rgba(0,114,255, .7)',
  },
]);
const afterColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'rgba(254,252,34,1)',
  },
  {
    offset: 1,

    color: 'rgba(207,205,0,0.43)',
  },
]);

const fourthIcon = [bg1, bg2];
const Policy: FC = () => {
  const {
    policySituation,
    getPolicySituation,
    policyCenterData,
    getPolicyCentreData,
    yearPolicy,
    getYearPolicy,
    outputValue,
    getOutPutValue,
  } = useModel('company');

  useEffect(() => {
    const id = window.sessionStorage.getItem('companyId') || '';
    getPolicySituation({ id });
    // getPolicyCentreData({ id });
    getYearPolicy({ id });
    getOutPutValue({ id });
  }, []);

  const fourth_data = useMemo(() => {
    if (yearPolicy && yearPolicy.length > 0) {
      return yearPolicy.map((item: any, index: number) => ({
        value: item?.topVal || 0,
        tb: item?.tbsj || 0,
        hb: item?.bottomVal || 0,
        title: '税收政策回报比',
        desc: '(税收/政策折算金额)',
        bg: fourthIcon[index],
      }));
    }
    return [];
  }, [yearPolicy]);

  return (
    <div className={styles.container}>
      <ScrollModel height={892}>
        <div className={styles.first}>
          <LittleTitle title="享受政策情况" />
          <div style={{ paddingTop: 29 }}>
            <SimpleList
              width={1810}
              height={305}
              columns={first_columns}
              dataSource={policySituation}
              sortNumber
              sortStyle={{
                textAlign: 'center',
                width: 80,
              }}
              sortText="序号"
              rowBackground
              rowStyle={{
                height: 50,
              }}
              hover
              headerStyle={{
                backgroundImage:
                  'linear-gradient(90deg, rgba(0,143,255,0.33) 0%, #008FFF 100%)',
                height: 50,
              }}
              odd
            ></SimpleList>
          </div>
        </div>
        <div className={styles.bottom_wrap}>
          <div className={styles.second}>
            <LittleTitle title="享受政策资金折算" />
            <div
              style={{
                position: 'absolute',
                top: -45,
                left: 2,
                overflow: 'hidden',
              }}
            >
              <Sunburst
                width={905}
                height={905}
                rediusNumber={38}
                dataSource={sunburstData}
              ></Sunburst>
            </div>
          </div>
          <div className={styles.right_wrap}>
            <div className={styles.third}>
              <LittleTitle title="产值情况" />
              <div>
                <Bar
                  width={850}
                  height={310}
                  category={outputValue?.names || []}
                  dataSource={outputValue?.values || []}
                  barColors={[
                    beforeColor,
                    beforeColor,
                    beforeColor,
                    beforeColor,
                    beforeColor,
                    afterColor,
                  ]}
                  textColors={[
                    '#06FEF7',
                    '#06FEF7',
                    '#06FEF7',
                    '#06FEF7',
                    '#06FEF7',
                    '#FDEC16',
                  ]}
                ></Bar>
              </div>
            </div>
            <div className={styles.fourth}>
              <LittleTitle title="年度政策回报比" />
              <div className={styles.fourth_warp}>
                {fourth_data.map((item: any, index: number) => (
                  <div
                    className={styles.fourth_item}
                    key={index}
                    style={{
                      backgroundImage: `url(${item.bg})`,
                    }}
                  >
                    <p className={styles.value}>
                      {item.value}
                      <span className={styles.value_unit}>亿元</span>
                    </p>
                    <div className={styles.pre_warp}>
                      <div className={styles.pre_item}>
                        <p className={styles.pre_value}>{item.tb}</p>
                        <p>同比增长</p>
                      </div>
                      <div className={styles.pre_item}>
                        <p className={styles.pre_value}>{item.hb}</p>
                        <p>预估回报</p>
                      </div>
                    </div>
                    <div className={styles.title_warp}>
                      <p className={styles.title_text}>{item.title}</p>
                      <p>{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </ScrollModel>
    </div>
  );
};
export default Policy;
